<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">

            <el-form-item label="日期" prop="date">
                <el-date-picker v-model="dateTime" type="month" placeholder="选择日期" value-format="yyyy-MM">
                </el-date-picker>
                <!-- <el-date-picker clearable v-model="dateTime" style="width:335px" type="datetimerange"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择创建时间"></el-date-picker> -->
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">

            <el-table-column type="index" label="序号" width="46" align="center">
            </el-table-column>
            <el-table-column label="供应商名称" align="center" prop="providerName" width="160" />
            <el-table-column label="平台收入(元)" align="center" prop="ptsr" />
            <el-table-column label="平台成本(元)" align="center" prop="ptcb" />
            <el-table-column label="平台利润(元)" align="center" prop="ptlr" />
            <el-table-column label="平台服务费(元)" align="center" prop="ptfwf" />
            <el-table-column label="中心库收入(元)" align="center" prop="zxksr" />
            <el-table-column label="中心库成本(元)" align="center" prop="zxkcb" />
            <el-table-column label="中心库利润(元)" align="center" prop="zxklr" />
            <el-table-column label="中心库服务费(元)" align="center" prop="zxkfwf" />
            <el-table-column label="总利润(元)" align="center" prop="zlr" />
            <el-table-column label="总服务费(元)" align="center" prop="zfwf" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import { providerServiceSearchApi } from "@/api/system/message";
import { downloadGet } from '@/utils/request'


export default {
    name: "OrderInquiry",
    data() {
        return {
            showOverflowTooltip: true,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 公告通知表格数据
            messageList: [],
            dateTime: this.formatDate(),
            // dateTime: [this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)), this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59, 999))],

            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                provide: "",
                startTime: "",
                endTime: "",

            },
            // 表单参数
            form: {


            },
            createTime: null,
            // 表单校验
            rules: {
            }
        };
    },
    created() {
        // try {
        //     this.queryParams.provide = JSON.parse(localStorage.getItem('User')).dept.deptName;
        //     this.getList();
        // } catch (error) {

        // }

        this.getList();
    },
    methods: {
        /** 导出按钮操作 */
        handleExport() {
            downloadGet(`system/ProviderConfig/export?startTime=${this.dateTime}`,null, `供应商服务汇总${this.dateTime}.xlsx`)
        },

        /** 查询公告通知列表 */
        getList() {
            this.loading = true;
            providerServiceSearchApi({ startTime: this.dateTime }).then(res => {
                if (res.code == 200) {
                    this.messageList = res.providerList;
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                provide: "",
                startTime: "",
                endTime: "",
            }
            this.resetForm("queryForm");
            // this.dateTime = [this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)), this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59, 999))];
            this.dateTime = this.formatDate();
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },


        // 日期转换
        formatDate() {
            const date = new Date();
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');

            return `${year}-${month}`;
        },
    }
};
</script>